﻿<template>
  <van-popup v-model="visible" position="bottom" closeable>
    <van-form @submit="handleSubmit" :loading="loading">
      <VanFieldSelectPicker
        name="Type"
        label="分类"
        v-model="formFields.Type"
        :columns="types"
        :option="option2"
        :rules="[{ required: true, message: '必填' }]"
      />
      <van-field
        v-model="formFields.Name"
        name="Name"
        label="标题"
        :rules="[{ required: true, message: '必填' }]"
      />
      <van-field
        v-model="formFields.Text"
        name="Text"
        label="摘要"
        :rules="[{ required: true, message: '必填' }]"
      />
      <VanFieldCheckbox
        name="ValueRoles"
        label="权限角色"
        v-model="formFields.ValueRoles"
        :columns="roles"
        :option="option"
        :rules="[{ required: false, message: '必填' }]"
      />
      <van-field
        v-model="formFields.Sort"
        name="Sort"
        label="排序"
        :rules="[{ required: false, message: '必填' }]"
      />
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </van-popup>
</template>

<script>
import {
  OA_DefForm_GetTheData,
  OA_DefForm_SaveData
} from "@/api/OA_Manage/OA_DefForm";
import { OA_DefType_GetDataList } from "@/api/OA_Manage/OA_DefType";
import { mapGetters, mapActions } from "vuex";
import VanFieldCheckbox from "@/components/VanField/VanFieldCheckbox";
import VanFieldSelectPicker from "@/components/VanField/VanFieldSelectPicker";
export default {
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  components: {
    VanFieldCheckbox,
    VanFieldSelectPicker
  },
  data() {
    return {
      visible: false,
      loading: false,
      formFields: {
        Type: "",
        Name: "",
        Text: "",
        Sort: 0,
        ValueRoles: []
      },
      entity: {},
      roles: [],
      types: [],
      option: {
        label: "text",
        value: "value"
      },
      option2: {
        label: "Name",
        value: "Name"
      }
    };
  },
  mounted() {
    this.GetAllRole().then(res => {
      this.roles = res;
    });
    OA_DefType_GetDataList({
      condition: "Type",
      keyword: "分类"
    }).then(resJson => {
      this.types = resJson.Data;
    });
  },
  methods: {
    ...mapActions(["GetAllRole"]),
    add() {
      this.entity = {};
      this.visible = true;
      this.formFields = {
        Type: "",
        Name: "",
        Text: "",
        Sort: 0,
        ValueRoles: []
      };
    },
    edit(id) {
      this.visible = true;
      this.$nextTick(() => {
        this.formFields = {
          Type: "",
          Name: "",
          Text: "",
          Sort: 0,
          ValueRoles: []
        };

        OA_DefForm_GetTheData({ id: id }).then(resJson => {
          this.entity = resJson.Data;
          if (!this.entity.ValueRoles) {
            this.entity.ValueRoles = [];
          }
          Object.keys(this.formFields).forEach(item => {
            this.formFields[item] = this.entity[item];
          });
        });
      });
    },

    handleSubmit(value) {
      this.entity = Object.assign(this.entity, this.formFields);
      this.entity.Value = "^" + this.entity.ValueRoles.join("^") + "^";
      this.loading = true;
      OA_DefForm_SaveData(this.entity).then(resJson => {
        this.loading = false;

        if (resJson.Success) {
          this.$toast("操作成功");
          this.afterSubmit();
          this.visible = false;
        } else {
          this.$toast(resJson.Msg);
        }
      });
    }
  }
};
</script>
